<template>
    <div style="height: 100%">
        <el-container class="member-grade-page">
            <div class="content-header">
                <el-row type="flex" class="row-bg" justify="space-between" style="padding: 10px 10px">
                    <el-col :span="6" class="header-title">保留消息列表</el-col>
                    <el-col :span="6">
                        <div style="text-align: right">
                        </div>
                    </el-col>
                </el-row>
            </div>
            <el-main>
                <el-table ref="grade_table" :data="dataList" height="100%" v-loading="loading">
                    <el-table-column prop="topic" label="主题名称" width="150"/>
                    <el-table-column prop="client" label="设备编号" width="100"/>
                    <el-table-column prop="qos" label="消息质量" width="80" >
                        <template slot-scope="props">
                            <div v-if="props.row.qos == 1" style="color: #42b983">Qos1</div>
                            <div v-if="props.row.qos == 2" style="color: #42b983">Qos2</div>
                            <div v-if="props.row.qos == 0" style="color: #42b983">Qos0</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="packet" label="消息内容" />
                    <el-table-column prop="created_at" label="创建时间" width="150">
                        <template slot-scope="props">
                            {{props.row.created_at|secondToDate}}
                        </template>

                    </el-table-column>
                    <el-table-column prop="updated_at" label="最后修改" width="150">
                        <template slot-scope="props">
                            {{props.row.updated_at|secondToDate}}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="80">
                        <template slot-scope="scope">
                            <el-link
                                    size="mini" plain
                                    type="primary"
                                    icon="el-icon-delete"
                                    :underline="false"
                                    style="margin-right: 5px;font-size: 11px"
                                    @click="remove(scope.row)">删除
                            </el-link>

                        </template>

                    </el-table-column>
                </el-table>
            </el-main>

            <el-footer class="content-table-pagination">
                <el-pagination
                        background
                        :current-page="pagination.current_page"
                        layout="total,prev, pager, next"
                        @current-change="getData"
                        :total="pagination.totalCount">
                </el-pagination>
            </el-footer>

        </el-container>
    </div>
</template>

<script>
    import {get_retain} from "../api/himq_http";
    import {formatTime} from "../comm/date_utils";

    export default {
        name: "MqttRetain",
        data() {
            return {
                dataList: [],
                loading: false,
                dialogShow: false,
                label_width: "80px",
                pagination: {
                    totalCount: 10,
                    current_page: 1
                },
            }
        },
        created() {
            this.getData(1)
        },
        filters:{
            secondToDate(s){
                return formatTime(s*1000,"Y-M-D h:m:s")
            },
        },
        methods: {
            getData(page) {
                console.log(page)
                this.loading = true;
                let that = this;
                get_retain({page:page,page_size:20}).then(
                    resp => {
                        that.loading = false;
                        that.dataList = resp.data.items;
                        that.pagination.totalCount =resp.data.count
                    }, err => {
                        that.loading = false;
                        console.log(err.message)
                    }
                )
            },
        }
    }
</script>

<style scoped>

</style>